import CardView from "@/components/CardView";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import PageTitle from "@/components/PageTitle";
import TextView from "@/components/TextView";
import { defineComponent, reactive, ref, render } from "vue";
import style from "./index.module.less";
import { useRequest } from "./request";
import {
  getSize,
  getUserInfoUrl,
  getUserType,
  phoneClick,
} from "@/command/apiTool";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import ButtonView from "@/components/ButtonView";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import InfoCellGray from "@/components/InfoCellGray";

export default defineComponent({
  setup() {
    const form = ref({});
    const { historyNum, useHistoryListForNum } = useRequest();
    const data: IFilterMenuChoose[] = [
      {
        type: "area",
        key: "code",
      },
      { type: "productType", key: "plantType", title: "种植品种" },
      {
        type: "workType",
        key: "workType",
        title: "类型",
      },
      { type: "datePicker", key: "workDate", title: "日期" },
    ];

    const render1 = () => {
      return (
        <div class={[style["banner-bg"]]}>
          <div class={"ml-29 mt-15"}>
            <div class={[style["text-num1"]]}>{historyNum.value || "0"}</div>
            <div class={[style["text-num2"]]}>累计帮工次数</div>
          </div>
        </div>
      );
    };

    const renderItem = (e: any) => {
      if (getUserType() == "1") {
        return (
          <InfoCellGray
            title={e.userName}
            src={e.logoUrl}
            right={e.workDate}
            class="w-full"
            text={`用工时间:${e.workDay}天`}
          >
            <TextView>{e.area + " " + e.town}</TextView>
            <ButtonView text="联系TA" />
          </InfoCellGray>
        );
      }
      console.log("list", e);
      const data = {
        title: e.userName,
        text: "类型：" + e.workTypeName + " 用工时间：" + e.workDay + "天",
        src: e.logoUrl,
        content: `${e.workPrice}元 /人/天`,
      };
      const buttons = {
        text: "联系大户",
        onClick: () => {
          phoneClick(e.phone);
        },
      };
      return (
        <div class={"w-full pb-10"}>
          <RoundInfo {...data} class="info-cell-gray" />
          <div class="text-[#FE8923] ml-50 text-15">{data.content}</div>
          <GreyBlock class="mt-[12px]">
            <TextView>{e.area + " " + e.town}</TextView>
            <ButtonView onClick={buttons.onClick}>{buttons.text}</ButtonView>
          </GreyBlock>
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="帮工记录" class={"pt-0 "}>
          {render1()}
          <CardView class={"z-10 mt-12 !pb-0 "} title="历史记录">
            <FilterMenuSearch
              v-model={form.value}
              choose={data}
              searchKey="userName"
            />
            {/* 类型  ，日期 */}
            <ListView
              {...getUserInfoUrl(
                {
                  dh: "",
                  xh: "/api/H5/service/helpWork/small/historyList",
                },
                form.value
              )}
              type="page"
              itemHeight={getUserType() == "1" ? 118 : 141}
              renderItem={renderItem}
              themeStyle="list-bottom-border"
            />
          </CardView>
        </PageTitle>
      );
    };
  },
});
